<template>
  <!-- 左文章 -->
  <div class="articlei pad">
    <!-- 标题 -->
    <div class="title">
      <div class="titleBars">
        <span
          :class="{ arBar: 'arBar', change: active === index }"
          v-for="(item, index) in barList"
          :key="index"
          @click="getArItem(index)"
        >
          {{ item }}
        </span>
      </div>
      <span class="issueAr" @click="issueAr">发布文章</span>
    </div>
    <!-- 内容 -->
    <div
      class="articleBox"
      v-for="item in artList"
      :key="item.index"
      @click="goArtDetails(item.id)"
    >
      <!-- 图片 -->
      <div class="picture">
        <img :src="item.cover" alt="" />
      </div>
      <!-- 文本 内容 -->
      <div class="txt">
        <!-- 文本标题 -->
        <h2>{{ item.articleTitle }}</h2>
        <!-- 内容 -->
        <div class="introduce">
          {{ item.content }}
        </div>
        <!-- 底部 信息 -->
        <div class="info">
          <span>
            {{ getLocalTime(parseInt(item.createDate)) }}/
            {{ item.viewCounts }}浏览 / {{ item.likeCount }}点赞 /
            {{ item.commentCounts }}评论 / {{ item.wordNumber }}字</span
          >
          <span>{{ item.tags[0] }}</span>
        </div>
      </div>
    </div>
    <!-- 加载更多 -->
    <div class="more" @click="moreArticlei">查看更多</div>
  </div>
</template>

<script>
   // 导入 接口文档
   import { postArticlei, postNewArticle } from '../../api/articlei.js';
   import { postArtDetails } from '../../api/articlei.js';
   export default {
     name: 'articlei',
     data() {
       return {
         // 文章 选项栏
         barList: ['最新文章', '热门文章', '最多点赞'],
         active: 0,
         //  获取文章
         page: 0, //从第几条开始获取数据
         count: 5, // 数量
         url: '/es/newestArticle', //接口地址 默认为最新文章的地址
         artCount: 0, //储存数据的数量
         artList: [], // 文章数据
       };
     },
     computed: {},
     methods: {
       getArItem(index) {
         this.active = index;
         if (index == 0) {
           //  最新
           //  调用最新的文章函数
           this.getArticlei();
         } else if (index == 1) {
           // 最热
           this.page = 0; // 还原 page
           // 获取 热门文章
           postArticlei('/es/hotArticle', this.page, this.count).then(res => {
             this.artList = []; // 清空之前的文章数据
             this.artList = res.data.data; //把新的数据 给文章数据
             this.url = '/es/hotArticle';
           });
         } else if (index == 2) {
           // 点赞最多
           this.page = 0; // 还原 page
           // 获取 点赞最多文章
           postArticlei('/es/maxLikeArticle', this.page, this.count).then(
             res => {
               this.artList = []; // 清空之前的文章数据
               this.artList = res.data.data; //把新的数据 给文章数据
               this.url = '/es/maxLikeArticle';
             },
           );
         }
       },

       // 获取文章 最新的文章
       async getArticlei() {
         const { data: res } = await postNewArticle(this.page, this.count);
         if(){
  this.artCount = res.data.length;
         this.artList = res.data;
         }


         // let time = this.getLocalTime(res.data[0].createDate);

         // console.log(time);
       },
       // 转换时间戳函数
       getLocalTime(nS) {
         return new Date(parseInt(nS))
           .toLocaleString()
           .replace(/:\d{1,2}$/, ' ');
       },

       // 查看更多
       moreArticlei() {
         this.page += this.count;
         postArticlei(this.url, this.page, this.count).then(res => {
           if (res.data.data.length !== 0) {
             this.artList.push(...res.data.data);
           } else {
             this.$message({
               message: '暂无更多数据',
               type: 'warning',
             });
           }
         });
       },
       //  发布文章
       issueAr() {
         this.$router.push('/blogWrite');
       },

       //  去文章详情页面
       goArtDetails(id) {
         this.$router.push(`/artDetails/${id}`);
       },
     },
     created() {
       this.getArticlei();
     },
   };
</script>

<style lang="less" scoped>
  @import url('../../state/css/articlei/articlei.less');

  .change {
    border-bottom: 2px solid salmon;
    color: salmon !important;
  }
  .pad {
    padding-left: 15px;
    padding-right: 15px;
  }
</style>
